<template>
  <div class="list">
    <div class="box">
      <div
        id="devicePos"
        style="width: 100%;height: 700px;"
      ></div>
    </div>

  </div>
</template>

<script>
import aMap from "@/components/amap/index";
export default {
  data() {
    return {
      hello: "电话标签",
      map: {}
    };
  },
  created() {
    //子组件通信
    this.$emit("sign",[
      {
        key:"showBread",
        val:true
      }
    ])
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      aMap.init().then(AMap => {
        let _this = this,
          map,
          cluster,
          points = [
            {
              lnglat: [113.666994, 34.753488]
            },
            {
              lnglat: [113.666994, 34.753488]
            },
            {
              lnglat: [113.666994, 34.753488]
            },
            {
              lnglat: [113.666994, 34.753488]
            },
            {
              lnglat: [114.539513, 38.040727]
            },
            {
              lnglat: [113.666994, 34.753488]
            }
          ],
          markers = [];
        map = new AMap.Map("devicePos", {
          resizeEnable: true,
          center: [105, 34],
          zoom: 4
        });
        this.bind(map, _this);
      });
    },
    bind(map, _this) {
      map.on("click", function(ev) {
        if (_this.marker) {
          map.remove(_this.marker);
        }
        _this.marker = new AMap.Marker({
          position: ev.lnglat
        });
        map.add(_this.marker);
        _this.position = ev.lnglat.lng + "," + ev.lnglat.lat;
      });
    }
  }
};
</script>
